<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情页</title>
    <link rel="stylesheet" href="../js/layui-v2.5.6/layui/css/layui.css">
    <style>
        a :hover {
            color: red;
        }
        .picimg {
            width: 100%;height: auto;
        }
        .picDetail {
            width: 32%;height:auto;border: solid 1px #eeeeee; padding: 2px; float:left; margin-top: 10px;
        }
        .picDetailTitle{
            text-align: center; margin-top: 3px;
        }
    </style>
</head>
<body>
<!-- 图片区域 -->
<div id="pic" class="layui-col-md12" style="width: 100%; height:500px; margin-top: 30px; text-align: center;">
    <div class="layui-card">
        <span id="picTitle">图片浏览</span>
    </div>
    <!-- 9宫格 -->
    <div id="picContent">
        <div class="layui-side-scroll" style="width: 100%;" id = "picList">
            <div class="picDetail">
                <img src="https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg" alt="图片"
                     class="picimg">
                <div class="picDetailTitle">图片标题</div>
            </div>
        </div>
    </div>
</div>
</body>

<script src="../js/layui-v2.5.6/layui/layui.all.js"></script>
<script>

    /**
     * 从请求地址中获取指定变量的值
     * @param variable
     * @returns {string}
     */
    function getQueryVariable(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return "";
    }

    let topicId = getQueryVariable("topicId");
    console.log("topicId:=" + topicId);
    if (topicId === "") {
        layer.msg("参数缺失");
        // 跳转到 404 页面
    }
    // 获取数据
    const baseUrl = window.location.protocol + "//" + window.location.host + "/videourl";
    let url =  baseUrl + "/photowall//query/pic/detail/";
    let $ = layui.jquery;
    $(function () {
        $.get(url + topicId, function (res) {
            console.log("res: " + res) ;
            let htmlText = '';
            let titleName = '';
            if (res.code === "200"){
                $.each(res.data, function (index, item) {
                    var html = "";
                    html += '<div class="picDetail">';
                    html += '<img src="';
                    html += item.imgUrl;
                    html += '" alt="';
                    html += item.name;
                    html += '"class="picimg"';
                    html += '<div class="picDetailTitle">';
                    html += item.name;
                    html += '</div>';
                    htmlText += html;
                    titleName = item.name ;
                });
                $("#picList").html(htmlText);
                console.log(titleName);
                $("#picTitle").text(titleName);
            }else {
                layer.msg("接口请求失败");
            }
        }, 'json');
    })
</script>

</html>